<template>
    <div class >
      <el-card class="ep-card ep-search">
          <el-form :model="searchForm" label-width="80px">
              <el-row :gutter="20">
                  <el-col :span="9">
                      <el-form-item label="流程名称" size="small"> 
                          <el-input v-model="searchForm.flowName"  placeholder="请输入流程名称"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2" style="float:right">
                        <el-button plain type="success" size="small"  @click="addFlowDefine">新增</el-button>
                    </el-col>
                  <el-col :span="2" style="float:right">
                        <el-button plain type="primary" size="small"  @click="init">查询</el-button>
                  </el-col>
              </el-row>
          </el-form>
      </el-card>
      <el-table :data="tableData" border style="width: 100%" size="mini">
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column prop="flowName" label="流程名称" align="center" width="120">
        </el-table-column>
        <el-table-column prop="flowCode" label="流程编号" align="center" width="260">
        </el-table-column>
        <el-table-column prop="version" label="版本号" align="center" width="120">
        </el-table-column>
        <el-table-column prop="isused" label="是否启用" align="center" width="120">
                <template slot-scope="scope">
                        <div v-for="item in flowState" :key="item.key">
                                <span v-if="item.key==scope.row.isused">
                                    {{item.label}}
                                </span>
                        </div>
                </template>
        </el-table-column>
        <el-table-column prop="createUserName" align="center" label="创建人">
        </el-table-column>
        <el-table-column prop="createTime" align="center" label="创建时间" :formatter="dateFormatter">
        </el-table-column>
        <el-table-column prop="remark"  align="center" label="备注">
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <el-button @click="design(scope.row)" type="text" size="small">设计</el-button>
            <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible" >
            <el-form :model="flowDefine" ref="flowDefine">
                <el-form-item label="流程名称" label-width="120px">
                    <el-input v-model="flowDefine.flowName" :disabled="viewHide" placeholder="请输入流程名称"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="流程编号" label-width="120px"  v-show="editCode">
                    <el-input v-model="flowDefine.flowCode" :disabled="viewHide"  placeholder="请输入流程编号"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="版本号" label-width="120px" >
                    <el-input v-model="flowDefine.version" :disabled="viewHide"  placeholder="请输入流程版本号"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用状态" label-width="120px">
                    <el-switch :disabled="viewHide"
                        v-model="useable"
                        @change = "stateChange"
                        active-text="启用"
                        inactive-text="禁用"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="备注" label-width="120px" >
                    <el-input type="textarea"
                              :rows="2" v-model="flowDefine.remark" :disabled="viewHide"  placeholder="请输入备注"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="!viewHide">
                <el-button @click="handleFormClose">取 消</el-button>
                <el-button type="primary" @click="doSave">保 存</el-button>
            </div>
        </el-dialog>
        <el-dialog :fullscreen="fullscreen" title="流程设计器"   :visible.sync="designerVisible">
                <div slot="title" class="header-title" style="margin-top: -13px">
                    <span class="title-name" style="">流程设计器</span>
                    <el-button type="primary" style="float:right;margin-right:50px;" @click="doDesign">保 存</el-button>
                </div>
                <iframe ref="ifrm" class="iframe"  :src="designerUrl"></iframe>
         </el-dialog>
      <el-card style="text-align:right;">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    data() {
      return {
        designerUrl: '',
        fullscreen: true,
        designerVisible:false,
        editCode:false,
        dialogFormVisible:false,
        dialogTitle: '新增流程定义',
        viewHide:false,
        flowState: [{key:"1",label:"启用"},{key:"0",label:"禁用"}],
        useable:true,
        total: 0,
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        searchForm: {
                  flowName: '',
        },
        flowDefine:{
            isused:'1'
        }
      };
    },
    computed: {},
    mounted() {
      this.init();
    },
    methods: {
        design(item){
            let user=JSON.parse(sessionStorage.getItem("user"));
            let curWwwPath = window.location.href;
            let pos = curWwwPath.indexOf("#" +this.$route.path);
            let localhostPath = curWwwPath.substring(0, pos);
            this.designerUrl = localhostPath + "static/gui/template.html?id=" + item.workflowTemplateId +
             "&baseURL=" + encodeURIComponent( process.env.baseURL)+
             "&localURL=" + encodeURIComponent( process.env.baseURL)+"&createUserId="+user.id+"&createUserName="+encodeURIComponent(user.realName)+"&token="+encodeURIComponent(sessionStorage.getItem("token")||'');
            this.designerVisible = true;
        },
        doDesign(){
            this.$refs.ifrm.contentWindow.design();
            this.designerVisible = false;
        },
        doSave(){
            let user=JSON.parse(sessionStorage.getItem("user"));
            this.flowDefine.createUserId=user.id;
            this.flowDefine.createUserName=user.realName;
            this.$api.formPost(  "/api/biz/flowDefine/doSave", this.flowDefine)
            .then(res => {
                if(res.retHead.code=="0000000"){
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.dialogFormVisible=false;
                    this.init();
                }else{
                    this.$message({
                        type: 'error',
                        message: res.retHead.message
                    });
                }
            });
        },
        //修改
        edit(row){
            this.dialogTitle = '修改流程定义';
            this.dialogFormVisible = true;
            this.flowDefine=row;
            this.flowDefine.createTime=new Date(row.createTime);
            if(row.updateTime){
                this.flowDefine.updateTime=new Date(row.updateTime);
            }
            
            this.useable=row.isused=='1'?true:false;
        },
        //删除
        remove(row){

            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params=row;
                params.createTime=new Date(row.createTime);
                 this.$api.formPost(  "/api/biz/flowDefine/doRemove", row).then(res => {
                    if(res.retHead.code=="0000000"){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.init();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.retHead.message
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
        },
        stateChange: function (val) {
            this.flowDefine.isused = val == true ? "1" : "0";
        },
        addFlowDefine(){
            this.dialogTitle = '新增流程定义';
            this.flowDefine={
            };
            this.dialogFormVisible=true;
        },
        dateFormatter(row){
            return this.formatDate(row.createTime,"yyyy-MM-dd");
        },
        handleFormClose(){
            this.dialogFormVisible=false;
        },
        sizeChange(n) {
            this.pageSize = n;
            this.init();
        },
        currentChange(n) {
            this.currentPage = n;
            this.init();
        },
        init() {
            let params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            flowName: this.searchForm.flowName,
            };
            this.$api.formPost(  "/api/biz/flowDefine/doGetList", params)
            .then(res => {
                if (res.retHead.code === "0000000") {
                this.tableData = res.retBody.list;
                this.total = res.retBody.total;
                }
            });
        }
        },
        created() {}
  };
  </script>
<style scoped>
        .iframe {
            width: 100%;
            height: 100%;
            border: 0;
            overflow: hidden;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            left: 0;
            top: 54px;
        }
        .title-name{
            font-size: 24px;
        }
      .el-table {
        width: 99.9% !important;
      }
</style>